<template>
  <ul class="collapse-nav">
    <li
      class="collapse-item"
      v-for="(navItem, navItemIndex) in data"
      :key="navItemIndex"
      @click.stop="clickNavItem(navItem)"
      :class="[navItem.showChild ? 'show' : '', isActive(navItem)]"
    >
      <div class="title-header">
        <div class="collapse-title" v-if="lang">
          {{ $t(navItem[titleKey]) }}
        </div>
        <div class="collapse-title" v-else>{{ navItem[titleKey] }}</div>
        <IconArrowDown class="collapse-svg" v-if="navItem.childs" />
      </div>
      <div class="collapse-childs">
        <ul v-if="navItem.childs">
          <li
            class="collapse-item"
            v-for="(navChildItem, navChildItemIndex) in navItem.childs"
            :key="navChildItemIndex"
            @click.stop="clickNavItem(navChildItem)"
            :class="[isActive(navChildItem)]"
          >
            <div class="title-header">
              <div class="collapse-title" v-if="lang">
                {{ $t(navChildItem[titleKey]) }}
              </div>
              <div class="collapse-title" v-else>
                {{ navChildItem[titleKey] }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
type DataItem = {
  title?: string;
  childs?: DataItem[];
  showChild?: boolean; // 子项是否可见
  path?: string;
};
type Props = {
  data: DataItem[];
  // 使用 $t 渲染
  lang?: boolean;
  // 子项 title 键名，默认为 'title'
  titleKey?: string;
  // 是否可以通过点击标签跳转链接
  routerLink?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  titleKey: "title",
});

const emits = defineEmits(["click-item"]);

const route = useRoute();
const closeOtherChildsVisible = (navItem: any) => {
  props.data.map((item: any) => {
    if (item.childs && item[props.titleKey] != navItem[props.titleKey]) {
      item.showChild = false;
    }
  });
};

// 点击子项
const clickNavItem = (navItem: DataItem) => {
  if (navItem.childs) {
    closeOtherChildsVisible(navItem);
    navItem.showChild = !navItem.showChild;
  }
  if (!navItem.childs) {
    if (props.routerLink) {
      goto(navItem.path);
      emits("click-item", navItem);
    }
  }
};

const isActive = computed(() => {
  return (navItem: DataItem) => {
    let activeName = "";
    if (navItem.childs) {
      navItem.childs.forEach((item) => {
        if (route.path == item.path) {
          activeName = "active";
        }
      });
    } else {
      if (route.path == navItem.path) {
        activeName = "active";
      }
    }
    return activeName;
  };
});

const closeAllChilds = (childs: any[]) => {
  if (!childs) childs = props.data;
  childs.map((item) => {
    item.showChild = false;
    if (item.childs) {
      closeAllChilds(item.childs);
    }
  });
};

defineExpose({
  closeAll: closeAllChilds,
});
</script>
<style scoped lang="less">
.collapse-nav {
  height: 100%;
  font-size: 72px;
  .collapse-item {
    .title-header {
      padding: 100px 0;
      border-bottom: 1px solid #ccd6de;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 40px;
    }
    &.active {
      & > .title-header {
        color: var(--yd-primary-color);
      }
    }
    .collapse-childs {
      .collapse-item {
        .title-header {
          padding-left: 100px;
        }
        &:last-child {
          padding-bottom: 0;
          border-bottom: none;
        }
      }
    }
  }
  & > .collapse-item {
    overflow: hidden;
    .collapse-childs {
      display: grid;
      grid-template-rows: 0fr;
      transition: all 0.3s;
      & > ul {
        overflow: hidden;
      }
    }

    &.show {
      .title-header {
        .collapse-svg {
          transform: rotate(-180deg);
        }
      }
      .collapse-childs {
        grid-template-rows: 1fr;
      }
    }
  }
}
</style>
